<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib uri="/WEB-INF/c.tld" prefix="c"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
	request.setAttribute("contextPath", request.getContextPath());
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<base href="<%=basePath%>">

<title>Book detail page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">

<script type="text/javascript" src="${contextPath}/js/jquery-1.7.2.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		$("#buy").click(function(){
			var quantity = $("#quantity").val();
 			if(quantity>"${book.storageVolume}"){
 				alert("库存不够了！")
 				return;
 			}
			$("#form").attr("action", "${contextPath}/order/directPurchase");
			$("#form").submit();
		});
		$("#add").click(function(){
 			var bookId = $("#bookId2").text();
 			var quantity = $("#quantity").val();
 			if(parseInt(quantity)>parseInt("${book.storageVolume}")){
 				alert("库存不够了！")
 				return;
 			}
			$.ajax({
				type:"GET", 
				url:"${contextPath}/order/joinTrolley?bookId="+bookId+"&quantity="+quantity,
				success:function(o){
					if (o && o.result == true){
						alert("成功添加到购物车！");
					}else{
						alert("尚未登录，请登录后使用！");
						location.href = "${contextPath}/login.jsp";
					}
				},
				error:function(o){
					alert("ERROR! 未知的错误！");
				}
			}); 
		});
		
	});
</script>

<style>
.container {
	margin-left: auto;
	margin-right: auto;
	width: 900px;
}

.header {
	width: 100%;
	margin-top: 0;
	margin-bottom: 0;
}

.content {
	position: relative;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 400px;
	border-bottom: black solid thin;
}

.picture {
	position: absolute;
	top: 40px;
	left: 180px;
	width: 200px;
	height: 260px;
}

.detail {
	position: absolute;
	top: 20px;
	left: 430px;
	width: 380px;
	height: 300px;
}

.commentList {
	position: absolute;
	top: 530px;
	left: 350px;
	width: 700px;
}

.commentTime {
	text-align: right;
	font-size: 12px;
}

.username {
	text-align: right;
	font-size: 13px;
}

.description {
	position: absolute;
	left: 180px;
	top: 300px;
	width: 600px;
}
.page
{
text-align:right;
font-size:14px;
font-style:italic;
}
</style>
</head>

<body>
	<div class="container">
		<div id="header">
			<br /> <a href="${contextPath }">回到首页</a>
			&nbsp;&nbsp;<a href="javascript:history.back();">返回</a> 
		</div>
		<div class="content">
			<div class="picture">
				<img alt="书籍图片" src="${contextPath }/images/image.png" width="180px" height="250px">
			</div>
			<div class="detail">
				<p>书名：${book.name }</p>
				<p>作者：${book.author }</p>
				<p>价格：${book.outPrice }</p>
				<p>出版社：${book.press }</p>
				<p>
					出版时间：
					<fmt:formatDate value="${book.publishTime }" pattern="yyyy-MM-dd"></fmt:formatDate>
				</p>
				<p>销量：<span id="storage">${book.saleVolume }</span></p>
				<p>库存：${book.storageVolume }</p>
				<form id="form" name="form" action="" method="get">
					<input id="bookId" name="bookId" type="hidden" value="${book.id}"/>
					购买数量： <input id="quantity" name="quantity" type="text" value="1" maxlength=2
						style="width: 24px; height: 20px;ime-mode: disabled"
						onkeydown="if(event.keyCode==13)event.keyCode=9"
						onkeypress="if ((event.keyCode<48 || event.keyCode>57)) event.returnValue=false""/>
					<input type="button" id="buy" value="立即购买">
					<input type="button" id="add" value="加入购物车">
						<span id="bookId2" style="display:none">${book.id}</span> 
				</form>
					
			</div>
			<div class="description">
				<p style="font-size: 16px; line-height: 30px">
					<i style="font-size: 14px; color: blue">书籍介绍</i>：${book.description }
				</p>
			</div>
			<br />
		</div>
		<div class="commentList">
			<h3>
				<b>用户评论</b>
			</h3>
			<div class="page">
				<a href="">上一页</a>/<a href="">下一页</a>
			</div>
			<hr />
			<c:forEach items="${comments }" var="c" varStatus="loop">
						评分：<b>${c.grade }</b>
				<div class="commentTime">
					评论时间：<i><fmt:formatDate value="${c.time }" pattern="yyyy-MM-dd"></fmt:formatDate></i>
				</div>
				<br />
				<p>${c.content }</p>
				<div class="username">by ${userNames[loop.count-1] }</div>
				<hr />
			</c:forEach>
		</div>
	</div>
</body>
</html>